import React, { memo, useState, useEffect, useRef } from 'react';
import { Button, Col, Input, Row, Table, Form, Dialog, FormInstanceFunctions, Card } from 'tdesign-react';
import Style from './index.module.less';
import { IGoodsTypeInfo, getGoodsTypeList, addGoodsType as add, updateGoodsType as update } from 'api/goodsType';
import { AddIcon, RemoveIcon, SearchIcon } from 'tdesign-icons-react';
import { MessagePlugin } from 'tdesign-react/es/message/Message';
import { use } from 'echarts';

const { FormItem } = Form;

export const goodsTypeAdd = () => {
  const formRef = useRef<FormInstanceFunctions>();
  const addFormRef = useRef<FormInstanceFunctions>();
  const [goodsTypeList, setGoodsTypeList] = useState<IGoodsTypeInfo[]>([]);
  const [addVisible, setAddVisible] = useState(false);
  const [updateVisible, setUpdateVisible] = useState(false);
  const [id, setId] = useState('');
  const search = () => {
    const queryValue = formRef?.current?.getFieldsValue(true) as any;
    getGoodsTypeList({ ...queryValue }).then((res) => {
      MessagePlugin.success('查询成功');
      setGoodsTypeList(res.data);
    });
  };
  const reset = () => {
    formRef.current?.reset();
    MessagePlugin.info('重置成功');
  };
  const isUndifined = (data: any) => {
    // eslint-disable-next-line no-restricted-syntax
    for (const key in data) {
      if (data[key] === undefined) {
        return true;
      }
    }
    return false;
  };
  const addGoodsType = async () => {
    const addValue = addFormRef.current?.getFieldsValue(true) as any;
    if (isUndifined(addValue)) {
      MessagePlugin.error('输入信息不能为空');
      return;
    }
    const res = await add(addValue);
    if (res.data) {
      MessagePlugin.success(`添加${res.msg}`);
    } else {
      MessagePlugin.error(`添加${res.msg}`);
    }
    addFormRef?.current?.reset();
    await getGoodsTypeList({}).then((res) => {
      setGoodsTypeList(res.data);
    });
    setAddVisible(false);
    console.log(addValue);
  };

  const updateGoodsType = async () => {
    const updateValue = addFormRef.current?.getFieldsValue(true) as any;
    const res = await update({ ...updateValue, id });
    if (res.data) {
      MessagePlugin.success(`修改${res.msg}`);
    } else {
      MessagePlugin.error(`修改${res.msg}`);
    }
    addFormRef?.current?.reset();
    await getGoodsTypeList({}).then((res) => {
      setGoodsTypeList(res.data);
    });
    setUpdateVisible(false);
    console.log(updateValue);
  };
  useEffect(() => {
    getGoodsTypeList({}).then((res) => {
      setGoodsTypeList(res.data);
    });
  }, []);

  return (
    <>
      <Card>
        <Row justify='start' style={{ marginBottom: '20px' }}>
          <Form ref={formRef} labelWidth={100} colon>
            <Row>
              <Col flex='1'>
                <Row gutter={[16, 16]}>
                  <Col span={10} xs={12} sm={6} xl={3}>
                    <FormItem label='商品类型编号' name='id'>
                      <Input placeholder='请输入商品类型号' />
                    </FormItem>
                  </Col>
                  <Col span={3} xs={12} sm={6} xl={3}>
                    <FormItem label='商品类型名称' name='typeName'>
                      <Input placeholder='请输入商品类型名称' />
                    </FormItem>
                  </Col>
                  <Col span={3} xs={12} sm={6} xl={3}>
                    <FormItem label='商品类型描述' name='description'>
                      <Input placeholder='请输入商品类型描述' />
                    </FormItem>
                  </Col>
                </Row>
                <div>
                  <br></br>
                </div>
                <Row gutter={[8, 8]}>
                  <Col>
                    <Button onClick={search} icon={<SearchIcon />} theme='primary' type='submit'>
                      查询
                    </Button>
                  </Col>
                  <Col>
                    <Button onClick={reset} icon={<RemoveIcon />} type='reset' theme='default'>
                      重置
                    </Button>
                  </Col>
                  <Col>
                    <Button
                      onClick={() => {
                        setAddVisible(true);
                      }}
                      icon={<AddIcon />}
                      theme='primary'
                      type='submit'
                    >
                      新增
                    </Button>
                  </Col>
                </Row>
              </Col>
              <Col></Col>
            </Row>
          </Form>
        </Row>
        <Table
          loading={false}
          data={goodsTypeList}
          columns={[
            {
              title: '商品类型名称',
              fixed: 'left',
              align: 'left',
              ellipsis: true,
              width: 200,
              colKey: 'typeName',
            },
            {
              title: '编号',
              width: 200,
              ellipsis: true,
              colKey: 'id',
            },
            {
              title: '商品类型描述',
              fixed: 'left',
              align: 'left',
              ellipsis: true,
              width: 200,
              colKey: 'description',
            },

            {
              align: 'left',
              fixed: 'right',
              width: 200,
              colKey: 'op',
              title: '操作',
              cell(record) {
                return (
                  <>
                    <Button
                      onClick={() => {
                        console.log('ok');
                        setUpdateVisible(true);
                        setId(record.row.id);
                      }}
                      theme='primary'
                      variant='text'
                    >
                      修改
                    </Button>
                  </>
                );
              },
            },
          ]}
          rowKey='index'
          hover
        />
        <Dialog
          confirmOnEnter
          visible={addVisible}
          onClose={() => {
            addFormRef.current?.reset();
            setAddVisible(false);
          }}
          onConfirm={addGoodsType}
        >
          <Form ref={addFormRef} colon labelWidth={120}>
            <FormItem
              label='商品类型名称'
              name='typeName'
              rules={[{ required: true, message: '商品类型名称必填', type: 'error' }]}
            >
              <Input placeholder='商品类型名称' />
            </FormItem>
            <FormItem
              label='商品类型描述'
              name='description'
              rules={[{ required: true, message: '商品类型描述必填', type: 'error' }]}
            >
              <Input placeholder='商品类型描述' />
            </FormItem>
          </Form>
        </Dialog>
        <Dialog
          confirmOnEnter
          visible={updateVisible}
          onClose={() => {
            addFormRef.current?.reset();
            setUpdateVisible(false);
          }}
          onConfirm={updateGoodsType}
        >
          <Form ref={addFormRef} colon labelWidth={120}>
            <FormItem
              label='商品类型名称'
              name='typeName'
              rules={[{ required: true, message: '商品类型名称必填', type: 'error' }]}
            >
              <Input placeholder='商品类型名称' />
            </FormItem>
            <FormItem
              label='商品类型描述'
              name='description'
              rules={[{ required: true, message: '商品类型描述必填', type: 'error' }]}
            >
              <Input placeholder='商品类型描述' />
            </FormItem>
          </Form>
        </Dialog>
      </Card>
    </>
  );
};

export default memo(goodsTypeAdd);
